<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-if 的实现原理</title>
</head>
<body>
    <!-- div#change.change>h1*2 -->
    <div id="change" class="change">
        <h1 data-if="true" style="background-color: red;">Hello, World!</h1>
        <h1 data-if="false" style="background-color: green;">Hello, World!</h1>
    </div>

    <script>
        let elements = document.querySelectorAll("#change > h1")
        console.log(elements);
        
        for (let index = 0; index < elements.length; index++) {
            const element = elements[index];

            if (element.hasAttribute("data-if")) {
                let attributeVale = element.getAttribute("data-if")
                console.log(attributeVale);
                
                // 根据属性的值决定所在的元素显示/删除
                if (eval(attributeVale)) {
                    element.removeAttribute("data-if")
                }
                else{
                    // 二者使用一个就可以。
                    // let parent = element.parentNode
                    let parent = element.parentElement
                    
                    // console.log(parent);
                    parent.removeChild(element)
                    
                }
            }
        }
    </script>
</body>
</html>